<template>
<div>
  <TypeNav></TypeNav>
  <section class="con">
    <div class="conPoin">
      <span v-show="categoryView.category1Name">{{categoryView.category1Name}}</span>
      <span v-show="categoryView.category2Name">{{categoryView.category2Name}}</span>
      <span v-show="categoryView.category3Name">{{categoryView.category3Name}}</span>
    </div>
    <div class="mainCon">
      <div class="previewWrap">
        <div class="spec-preview">
          <img :src="getDefaulImg" />
          <div class="event"  @mousemove="handler"></div>
          <div class="mask" ref="mask"></div>
          <div class="big" >
            <img :src="getDefaulImg" ref="img"/>
          </div>
        </div>
        <image-list :skuImageList="skuImageList" @imageIndex="changeImage"/>
      </div>
      <div class="InfoWrap">
        <div class="goodsDeatail">
          <h3 class="InfoName">{{skuInfo.skuName}}</h3>
          <p class="news">{{skuInfo.skuDesc}}</p>
          <div class="priceArea">
            <div class="priceArea1">
              <p>价格</p>
              <h2>￥{{skuInfo.price}}</h2>
              <p>降价通知</p>
              <p>累计评价65545</p>
            </div>
            <div class="priceArea2">
              <p>促销</p>
              <p>加价购</p>
              <p>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</p>
            </div>
          </div>
          <div class="support">
            <div class="supportArea">
              <p>支持</p>
              <p>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</p>
            </div>
            <div class="supportArea">
              <p>配送至</p>
              <p>广东省 深圳市 宝安区</p>
            </div>
          </div>
        </div>
        <div class="choosed">
       <dl v-for="(saleAttr,index3) in spuSaleAttrList" :key="saleAttr.id">
         <dt >{{saleAttr.saleAttrName}}</dt>
         <dt  v-for="(spuSaleAttrValue,index) in saleAttr.spuSaleAttrValueList" @click="findIndex(index,index3)"
              :class="{active:((index==value2)&&(index3==0))||((index==value3)&&(index3==1))}">{{spuSaleAttrValue.saleAttrValueName}}</dt>
       </dl>
        </div>
        <div class="choose">
         <input type="text"  v-model:value="value" @change="changeValue"/>
          <button @click="value++">+</button>
          <button @click="value>1?value--:value=1" >-</button>
          <a href="javascript:void(0)" @click="addShopCart">加入购物车</a>
        </div>
      </div>
    </div>
  </section>
</div>
</template>

<script>
import {mapGetters} from 'vuex'
import imageList from '../../pages/Details/imageList/index'
import Header from "../../components/header";
export default {
  name: "Detail",
  components:{
    Header,
    imageList,
  },
  data(){
    return{
    value:1,
      index2:0,
      isShow:false,
      value2:0,
      value3:0
    }
  },
  methods:{
    addShopCart(){
      try {
        sessionStorage.setItem('SKUINFO',JSON.stringify(this.skuInfo))//本地存储不能是对象所以要变为json字符串,然后通过获取json对象
        this.$store.dispatch('addOrderUpdateShopCart', {
          skuId:this.$route.params.skuid,
          skuNum:this.value
        })
        this.$router.push({
          name:'addCartSuccess',
          query:{
            skuNum:this.value
          }
        })
      }catch (error){
        alert(error.message)
      }
    },
    findIndex(index,index3){
      if(index3==0) this.value2 = index
      if(index3==1) this.value3=index
    },
    changeValue(event){
        let value=Math.floor(event.target.value )//向下取整
      if(isNaN(value)||value<1)//当输入的数值不是数字或者数字不是正数时为1
      {
        this.value=1
      }else {
        this.value = value
      }
    },
    handler(event){
     this.isShow=true
      let mask=this.$refs.mask
      let img=this.$refs.img
      let left=event.offsetX-mask.offsetWidth/2
      let top=event.offsetY-mask.offsetHeight/2
      if(left<=0)left=0
      if(left>=mask.offsetWidth)left=mask.offsetWidth
      if(top>=mask.offsetWidth)top=mask.offsetWidth
      if(top<=0)top=0
      mask.style.left=left+'px'
      mask.style.top=top+'px'
      img.style.left=-2*left+'px'//是前面的两倍(长宽多是两倍,定位也是)
      img.style.top=-2*top+'px'
    },
    changeImage(index){
      this.index2=index
    }
  },
  mounted() {
    this.$store.dispatch('getGoodInfo',this.$route.params.skuid)
  },
  computed:{
    ...mapGetters(['categoryView','skuInfo','spuSaleAttrList']),
    skuImageList(){
      return this.skuInfo.skuImageList||[]
    },
    getDefaulImg(){
     return  this.skuImageList[this.index2].imgUrl
    }
  }
}







</script>

<style scoped lang="less">
.active{
  color: green;
  border: 1px solid green;
}
dl{
  width: 700px;
  height: 30px;
  margin: 13px 0;
}
dt:nth-child(1){
  margin-right: 15px;
  border: none;
  color: #333;
  height: 28px;
  padding: 0;
}
dt{
  height: 24px;
  display: inline-block;
  padding: 2px 14px;
  margin-right: 5px;
  color: #666;
  border-top: 1px solid #eee;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  border-left: 1px solid #eee;
  font-weight: normal;
  text-align: center;
  line-height: 24px;
}
.goodsDeatail{
  border-bottom: 1px solid #ededed;
  margin-bottom: 15px;
}
.choose{
  input{
    width: 38px;
    height: 37px;
    float: left;
    text-align: center;
    border:1px solid rgb(204, 204, 204);
  }
  button{
outline: none;
    border:1px solid rgb(204, 204, 204);
    display:block;
    width: 17px;
    height: 19.5px;
  }
  a{
position: relative;
    left: 80px;
    bottom: 38px;
    width: 130px;
    height: 36px;
   display: inline-block;
    background-color: #e1251b;
    padding: 0 25px;
    text-align: center;
    color: #fff;
    line-height: 36px;
  }
}
.support {
  height: 72px;
  .supportArea {
    p:nth-child(1) {
        font-size: 12px;
      letter-spacing: 10px;
     display: inline-block;
      margin-right: 15px;
      height: 28px;
    }
    p:nth-child(2) {
      height: 28px;
      margin-top: 10px;
      color :rgb(153, 153, 153);
      display: inline-block;
      font-size: 12px;
    }
  }
}
.priceArea2{
  height: 56px;
  margin-top: 10px;
  p:nth-child(1){
    float: left;
    font-size: 12px;
    margin-right: 15px;
    letter-spacing: 10px;
  }
  p:nth-child(2){
    float: left;
    padding: 3px;
    font-size: 12px;
    background: rgb(200, 22, 35);
    color: rgb(255, 255, 255);
  }
  p:nth-child(3){
    font-size: 12px;
    width: 500px;
    color: rgb(153, 153, 153);
    display: inline-block;
  }
}
.priceArea{
  background: rgb(254, 233, 235);
  width: 686px;
  height: 108px;
  margin: 10px 0;
  padding: 7px;
  .priceArea1 {
    height: 32px;
    margin-top: 10px;
    p:nth-child(1){
      letter-spacing: 10px;
    }
    p {
      margin-top: 10px;
      height: 28px;
      width: 45px;
      float: left;
      font-size: 12px;
      margin-right: 15px;
      float: left;
    }
p:nth-child(3){
  color:rgb(200, 22, 35);
  height: 16px;
  width: 48px;
}
    p:nth-child(4){
      float: right;
      width: auto!important;
      margin-right: 0!important;
    }
    h2 {
      color: rgb(200, 22, 35);
      font-size: 24px;
      float: left;
    }
  }
}
.InfoName{
  margin-top: 15px;
  font-size: 14px;
}
.news{
  color: rgb(225, 34, 40);
  margin-top: 15px;
  font-size: 12px;
}
.mainCon{
  height: 458px;
  width: 1200px;
  margin: 0 auto;
}
.InfoWrap{
  float: right;
  height: 357px;
  width: 700px;
}
.previewWrap{
  position: relative;
  margin-left: 1px;
  width: 400px;
  height: 458px;
  float: left;
  .spec-preview {
    position: relative;
    width: 402px;
    height: 402px;
    z-index: 998;
    border: 1px solid rgb(204, 204, 204);
    img {
      width: 400px;
      height: 400px;
    }
    .big{
      overflow: hidden;
      position: absolute;
      width: 402px;
      height: 402px;
      left: 100%;
      top:-1px;
      border: 1px solid #aaa;
      background: #fff;
     z-index: 998;
      display: none;
      img{
        left:0;
        top: 0;
        max-width: 200%;
        position: absolute;
        width: 200%;
        height: 200%;
      }
    }
  .event:hover ~ .big{
      display: block;
    }
    .event:hover ~ .mask{
      display: block;
    }
    .event{
      width: 400px;
      height: 400px;
      position: absolute;
      top:1px;
      left: 1px;
      z-index: 998;
    }
    .mask{
      display:none;
      position: absolute;
      left: 0;
      top:0;
      background-color: rgba(0,255,0,.3);
      width: 50%;
      height: 50%;
    }
  }
}
.con{
  margin:15px 32px 0px 33px;
  height: auto;
}
.conPoin{
  margin: 0 auto;
  width: 1200px;
  height: 34px;
  span{
    color:rgb(51, 51, 51);
    font-size:12px
  }
  span:nth-child(n+2):before{
    display: inline-block;
    content: "/";
    padding: 0 6px;
    color:rgb(204, 204, 204)
  }
}
</style>
